<template>
	<view>
		<view class="item">
			<u-search :animation="true" placeholder="请输入搜索关键词" v-model="curWord" @input="inputWord"
				class="searchIcon"></u-search>
		</view>
		<view class="item">
			<text class="tip">热门搜索:</text>
			<text class="hot-word" @click="doSearch('后端开发')">后端开发</text>
			<text class="hot-word" @click="doSearch('前端开发')">前端开发</text>
			<text class="hot-word" @click="doSearch('Java')">Java</text>
		</view><list-item :list="list" :load="load" @loadmore="loadmore"></list-item>
	</view>
</template>

<script>
	import {
		getList
	} from '@/common/mock/mock.js'
	import {
		config
	} from '@/common/config.js';
	import listItem from '@/components/list/list-item.vue'
	export default {
		components: {
			listItem
		},
		data() {
			return {
				load: {
					loading: 'loading'
				},
				list: [], // 数据列表
				curWord: "" //当前搜索关键词
			}
		},
		created() {
			this.getList();
		},
		methods: {
			// 输入监听
			inputWord(e) {
				// this.curWord = e.detail.value // 已使用v-model,无需再次赋值
				// 节流,避免输入过快多次请求
				this.searchTimer && clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.doSearch(this.curWord)
				}, 300)
			},

			// 搜索
			doSearch(word) {
				this.curWord = word
				this.list = []
				this.getList()
			},
			getList() {

				// #ifndef APP-PLUS
				// uniCloud云函数
				// this.$api.get_list({
				// 	name: this.curWord,
				// 	page: 1,
				// 	pageSize: 4
				// }).then((res) => {
				// 	const {
				// 		data
				// 	} = res;
				// 	if(data.length === 0){
				// 		this.load.loading = 'noMore'
				// 		// 强制渲染页面
				// 		this.$forceUpdate()
				// 		return
				// 	}
				// 	this.list = data;
				// })

				// 后端数据
				uni.request({
					url: config.url + "job/tabbar",
					data: {
						name: this.curWord,
						page: 1,
						pageSize: 4
					}
				}).then((res) => {
					console.log(res);
					console.log(this.curWord);
					const {
						data
					} = res;
					if (data.length === 0) {
						this.load.loading = 'noMore'
						// 强制渲染页面
						this.$forceUpdate()
						return
					}
					this.list = data.data;
				})
				// #endif

				// #ifdef APP-PLUS
				// mock数据
				getList(
					this.curWord,
					1,
					4
				).then((res) => {
					if (res.length === 0) {
						this.load.loading = 'noMore'
						// 强制渲染页面
						this.$forceUpdate()
						return
					}
					this.list = res;
				})
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	/*关键词搜索*/
	.item {
		padding: 10rpx;
	}

	.tip {
		font-size: 30rpx;
		vertical-align: middle;
	}

	.hot-word {
		font-size: 24rpx;
		margin-left: 30rpx;
		padding: 6rpx 40rpx;
		border: 2rpx solid $boss-base-color;
		border-radius: 100rpx;
		vertical-align: middle;
		color: $boss-base-color;
	}
</style>